<form class="content-margin edit-backup edit-ongoing-task" data-bind="with: editedTask" autocomplete="off">
    <div class="align-items-center justify-content-between d-flex gap-2 margin-bottom-md padding-top-xs">
        <div class="flex-horizontal gap-2">
            <i class="icon-server-wide-backup"></i>
            <h2 data-bind="text: $parent.isAddingNewBackupTask() ? `New Server-Wide Backup Task` : `Edit Server-Wide Backup Task`" class="mb-0"></h2>
            <span class="badge license-restricted-badge professional" data-bind="if: !$root.hasServerWideBackups">Professional +</span>
        </div>
        <div class="flex-end margin-right-xs" data-bind="react: $root.infoHubView"></div>
    </div>
    <div class="toolbar" data-bind="with: $root">
        <span data-placement="right" data-toggle="tooltip" data-html="true" data-animation="true"
                        data-bind="tooltipText: $root.hasServerWideBackups ? null : `<div class='padding'>Your current license does not support this feature.<br /><a href='https://ravendb.net/l/FLDLO4' target='_blank'>Upgrade your plan</a> to access.</div>`">
            <button type="submit" class="btn btn-primary"
                data-bind="click: saveBackupSettings, disable: spinners.save() || !dirtyFlag().isDirty(), css: { 'btn-spinner': spinners.save }">
                <i class="icon-save"></i><span>Save</span>
            </button>
        </span>
        <button data-bind="click: cancelOperation" class="btn btn-default" title="Return to the Server-Wide Tasks view">
            <i class="icon-cancel"></i><span>Cancel</span>
        </button>
    </div>
    <div data-bind="css: { 'pe-none item-disabled': !$root.hasServerWideBackups }">
        <div class="panel">
            <div class="padding">
                <div class="row margin-bottom" data-bind="validationElement: name">
                    <label class="control-label col-sm-4 col-lg-2">Task Name</label>
                    <div class="col-sm-4">
                        <input data-bind="textInput: name" id="taskName" type="text" class="form-control" placeholder="Enter a name for the Server-Wide Backup Task"/>
                    </div>
                </div>
                <div class="row margin-bottom">
                    <label class="control-label col-sm-4 col-lg-2">Task State</label>
                    <div class="col-sm-4">
                        <button type="button" class="btn btn-block dropdown-toggle text-left" data-toggle="dropdown" aria-expanded="false">
                            <span data-bind="text: stateText()"></span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#" data-bind="click: _.partial($root.setState, 'Enabled')"><span>Enabled</span></a></li>
                            <li><a href="#" data-bind="click: _.partial($root.setState, 'Disabled')"><span>Disabled</span></a></li>
                        </ul>
                    </div>
                </div>
            <div class="row margin-bottom">
                <label class="control-label col-sm-4 col-lg-2">Backup Upload Mode</label>
                <div class="col-sm-4">
                    <div class="dropdown btn-block">
                        <button class="btn btn-block dropdown-toggle text-left" type="button" data-toggle="dropdown">
                            <span data-bind="text: backupUploadMode"></span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" data-bind="foreach: backupUploadModes">
                            <li><a href="#" data-bind="text: $data, click: $parent.useBackupUploadMode.bind($parent, $data)"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
                <div class="row margin-bottom" data-bind="validationElement: backupType">
                    <label class="control-label col-sm-4 col-lg-2">Backup Type <i class="required"></i> <small><i class="backup-info icon-info text-info"></i></small></label>
                    <div class="col-sm-4" data-bind="validationOptions: { insertMessages: false }">
                        <div class="dropdown btn-block">
                            <button class="btn btn-block dropdown-toggle text-left" type="button" data-toggle="dropdown">
                                <span data-bind="text: backupType() || 'Select backup type..'"></span>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" data-bind="foreach: backupOptions">
                                <li class="position-relative">
                                    <a href="#" data-bind="css: { 'item-disabled pe-none': !$root.hasSnapshotBackups && $data === 'Snapshot' }, click: $parent.useBackupType.bind($parent, $data)">
                                        <span data-bind="text: $data"></span>
                                        <!-- ko if: !$root.hasSnapshotBackups && $data === 'Snapshot' -->
                                        <span class="badge license-restricted-badge enterprise margin-left-xxs">Enterprise</span>
                                        <!-- /ko -->
                                    </a>
                                </li>
                            </ul>
                            <div class="bg-warning padding-left-xxs" data-bind="visible: isSnapshot() && excludeInfo().shardedDatabaseNames().length > 0">
                                <small>Snapshot is not supported in <i class="icon-sharding text-shard"></i> Sharded Databases</small>
                            </div>
                        </div>
                        <span class="help-block" data-bind="validationMessage: backupType"></span>
                    </div>
                </div>
                <div data-bind="collapse: isSnapshot, with: snapshot">
                    <div class="row margin-bottom">
                    <label class="control-label col-sm-4 col-lg-2">Compression Algorithm</label>
                        <div class="col-sm-4">
                            <div class="dropdown btn-block">
                                <button class="btn btn-block dropdown-toggle text-left" type="button" data-toggle="dropdown">
                                <span data-bind="text: compressionAlgorithm"></span>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" data-bind="foreach: compressionAlgorithmOptions">
                                <li><a href="#" data-bind="text: $data, click: $parent.useAlgorithm.bind($parent, $data)"></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row margin-bottom">
                    <label class="control-label col-sm-4 col-lg-2">Compression Level</label>
                    <div class="col-sm-4">
                        <div class="dropdown btn-block">
                            <button class="btn btn-block dropdown-toggle text-left" type="button" data-toggle="dropdown">
                                    <span data-bind="text: compressionLevel"></span>
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" data-bind="foreach: compressionLevelOptions">
                                    <li><a href="#" data-bind="text: $data, click: $parent.useCompression.bind($parent, $data)"></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-offset-4 col-lg-offset-2 col-lg-4" data-bind="validationElement: hasDestination">
                        <div class="help-block" data-bind="validationMessage: hasDestination"></div>
                    </div>
                </div>
                <div class="row margin-bottom margin-bottom-sm">
                    <div class="col-sm-offset-4 col-lg-offset-2 col-sm-4">
                        <div class="toggle">
                            <div class="toggle" data-placement="right" data-toggle="tooltip" title="Toggle on to set a responsible node for the task" data-animation="true">
                                <input id="responsibleNode" type="checkbox" data-bind="checked: manualChooseMentor, disable: $root.possibleMentors().length === 0">
                                <label for="responsibleNode">Set responsible node</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div data-bind="compose: $root.taskResponsibleNodeSectionView"></div>
                <div data-bind="collapse: isSnapshot, with: snapshot">
                    <div class="row margin-bottom-xs">
                        <div class="col-sm-4 col-sm-offset-4 col-lg-offset-2">
                            <div class="toggle">
                                <div class="toggle" data-placement="right" data-toggle="tooltip" data-animation="true"
                                     title="Back up index definitions only. Indexes will be rebuilt from these definitions upon Restore.">
                                    <input id="excludeIndexes" type="checkbox" data-bind="checked: excludeIndexes">
                                    <label for="excludeIndexes">Exclude indexes data</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div data-bind="with: excludeInfo">
                    <div class="row margin-bottom margin-bottom-xs">
                        <div class="col-sm-offset-4 col-lg-offset-2 col-sm-4">
                            <div class="toggle">
                                <div data-placement="right" data-toggle="tooltip" title="Select databases to exclude from the server-wide backup" data-animation="true">
                                    <input id="excludeDatabase" type="checkbox" data-bind="checked: exclude, disable: isSnapshot() && shardedDatabaseNames().length > 0">
                                    <label for="excludeDatabase">Exclude databases</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row margin-bottom margin-bottom-xs">
                        <div class="col-sm-offset-4 col-lg-offset-2 col-sm-4">
                            <div data-bind="collapse: exclude">
                                <div class="flex-horizontal">
                                    <div class="flex-grow">
                                        <div class="dropdown btn-block flex-grow" data-bind="validationElement: databasesToExclude">
                                            <input class="form-control dropdown-toggle" placeholder="Select (or enter) a database to exclude" data-toggle="dropdown" autocomplete="off"
                                                   data-bind="textInput: inputDatabaseToExclude, attr: { id: 'databaseNameInput' }" />
                                            <span class="caret dropdown-toggle" data-toggle="dropdown"></span>
                                            <ul class="dropdown-menu" role="menu" style="display: none;"
                                                data-bind="autoComplete: '#databaseNameInput', foreach: createDatabaseNameAutocompleter()">
                                                <li role="presentation" data-bind="click: $parent.addWithBlink.bind($parent, $data)">
                                                    <a role="menuitem" tabindex="-1" href="#">
                                                        <span data-bind="text: $data"></span>
                                                    </a>
                                                </li>
                                            </ul>
                                            <span class="help-block" data-bind="validationMessage: databasesToExclude"></span>
                                        </div>
                                    </div>
                                    <div>
                                        <button class="btn btn-info" data-bind="click: addDatabase, enable: inputDatabaseToExclude() && canAddDatabase() && !(isSnapshot() && shardedDatabaseNames().includes(inputDatabaseToExclude()))">
                                            <i class="icon-plus"></i><span>Add Database</span>
                                        </button>
                                    </div>
                                </div>

                                <div data-bind="visible: databasesToExclude() && databasesToExclude().length || ($parent.isSnapshot() && shardedDatabaseNames().length > 0)" class="margin-top-sm">
                                    <label><strong>Excluded Databases:</strong></label>
                                    <ul class="well collection-list" data-bind="foreach: databasesToExclude, visible: databasesToExclude() && databasesToExclude().length">
                                        <li>
                                            <div class="name" data-bind="text: $data"></div>
                                            <a title="Remove database" href="#" data-bind="click: $parent.removeDatabase.bind($parent, $data)"><i class="icon-trash"></i></a>
                                        </li>
                                    </ul>
                                    <ul class="well collection-list" data-bind="visible: $parent.isSnapshot() && shardedDatabaseNames().length > 0">
                                        <li>
                                            <div class="bg-warning name">
                                                <span data-placement="top" data-toggle="tooltip" title="Snapshot is not supported in sharded databases. Existing and new sharded databases will be excluded from this task." data-animation="true" data-bind="visible: $parent.isSnapshot()"><i class="icon-info"></i><small>All sharded databases listed below are <strong>automatically excluded</strong> as Snapshot is not supported</small></span>
                                            </div>
                                        </li>
                                        <!-- ko foreach: shardedDatabaseNames()-->
                                        <li>
                                            <div class="name"><i class="icon-sharding text-shard"></i><span data-bind="text: $data"></span></div>
                                        </li>
                                        <!-- /ko -->
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <h3 class="margin-bottom margin-bottom-xs">Schedule</h3>
        <div class="panel">
            <div class="padding">
                <div class="row margin-bottom" data-bind="validationElement: fullBackupFrequency">
                    <label class="control-label col-xs-12 col-sm-4 col-lg-2">Full</label>
                    <div class="col-xs-6 col-sm-4">
                        <div class="toggle" data-bind="validationOptions: { insertMessages: false }">
                            <input id="fullBackupToggle" type="checkbox" data-bind="checked: fullBackupEnabled">
                            <label for="fullBackupToggle">Enable full backup</label>
                        </div>
                        <div data-bind="compose: { model: $root.fullBackupCronEditor }, visible: fullBackupEnabled"></div>
                    </div>
                </div>
                <div class="row margin-bottom" data-bind="validationElement: incrementalBackupFrequency">
                    <label class="control-label col-xs-12 col-sm-4 col-lg-2">Incremental</label>
                    <div class="col-xs-6 col-sm-4">
                        <div class="toggle" data-bind="validationOptions: { insertMessages: false }">
                            <input id="incrementalBackupToggle" type="checkbox" data-bind="checked: incrementalBackupEnabled">
                            <label for="incrementalBackupToggle">Enable incremental backup</label>
                        </div>
                        <div data-bind="validationElement: incrementalBackupEnabled">
                            <div class="help-block" data-bind="validationMessage: incrementalBackupEnabled"></div>
                        </div>
                        <div data-bind="compose: { model: $root.incrementalBackupCronEditor }, visible: incrementalBackupEnabled"></div>
                    </div>
                </div>
            </div>
        </div>
        <h3 class="margin-bottom margin-bottom-xs">Retention Policy</h3>
        <div class="panel" data-bind="with: retentionPolicy">
            <div class="padding">
                <div class="toggle">
                    <input id="limit-backups-by-age" type="checkbox" data-bind="checked: retentionPolicyEnabled">
                    <label for="limit-backups-by-age">Limit # of backups by age</label>
                </div>
                <div class="row collapse" data-bind="collapse: retentionPolicyEnabled">
                    <div class="col-sm-8 col-lg-6 margin-top margin-bottom">
                        <div class="row" data-bind="validationElement: minimumBackupAgeToKeep">
                            <label class="control-label col-xs-12 col-sm-6 col-lg-4">
                                Minimum retention time <small><i class="backup-age-info icon-info text-info"></i></small>
                            </label>
                            <div class="col-xs-12 col-sm-6 col-lg-8">
                                <input type="text" class="form-control" data-bind="durationPicker: minimumBackupAgeToKeep, durationPickerOptions: { showDays: true }" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-offset-4">
                            <span data-bind="validationElement: minimumBackupAgeToKeep">
                                <span class="help-block" data-bind="validationMessage: minimumBackupAgeToKeep"></span>
                            </span>
                            </div>
                        </div>
                        <div class="row" data-bind="if: !minimumBackupAgeToKeep.error()">
                            <div class="col-sm-offset-2">
                                <div class="bg-info padding padding-sm small margin-top">
                                    <i class="icon-info"></i><span data-bind="html: humaneRetentionDescription"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <h3 class="margin-bottom margin-bottom-xs">Encryption</h3>
        <div class="panel" data-bind="with: encryptionSettings" data-bind="validationElement: enabled">
            <div class="padding">
                <div class="flex-horizontal" data-bind="validationElement: enabled">
                    <div class="toggle margin-right" data-bind="validationOptions: { insertMessages: false }">
                        <input id="toggle-encryption" type="checkbox" data-bind="checked: enabled">
                        <label for="toggle-encryption">Encrypt backup</label>
                    </div>
                    <span class="help-block" data-bind="validationMessage: enabled"></span>
                    <small data-bind="visible: $root.editedTask().backupType() === 'Snapshot' && enabled()"><i class="serverwide-snapshot-encryption-info icon-info text-info"></i></small>
                </div>
                <div data-bind="collapse: needExplicitConsent">
                    <div class="flex-horizontal" data-bind="validationElement: allowUnencryptedBackupForEncryptedDatabase">
                        <div class="toggle margin-right" data-bind="validationOptions: { insertMessages: false }">
                            <input id="toggle-unencrypted-backup" type="checkbox" data-bind="checked: allowUnencryptedBackupForEncryptedDatabase">
                            <label for="toggle-unencrypted-backup">Allow unencrypted backup for encrypted database</label>
                        </div>
                        <span class="help-block" data-bind="validationMessage: allowUnencryptedBackupForEncryptedDatabase"></span>
                    </div>
                </div>
                <div data-bind="collapse: showOriginalKeySection">
                    <div class="row">
                        <label class="control-label col-sm-4 col-lg-2">Current Encryption Key</label>
                        <div class="col-sm-4">
                            <input type="text" data-bind="textInput: originalKey" class="form-control margin-bottom" disabled title="This key is currently in use"/>
                        </div>
                    </div>
                    <div class="row" >
                        <div class="col-sm-4 col-sm-offset-4 col-lg-offset-2">
                            <div class="toggle margin-bottom">
                                <input id="toggleChangeKey" type="checkbox" data-bind="checked: changeKeyRequest">
                                <label for="toggleChangeKey">Change encryption key</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-addon padding padding-lg" data-bind="collapse: showProvidedKeySection">
                    <div class="row">
                        <div class="col-sm-12 col-lg-6">
                            <div>
                                <h3 data-bind="visible: !changeKeyRequest()">Encryption Key Configuration</h3>
                                <h3 data-bind="visible: changeKeyRequest">Select New Encryption Key</h3>
                            </div>
                            <hr />
                            <div data-bind="with: encryptionSection">
                                <div data-bind="compose: $root.setupEncryptionKeyView"></div>
                            </div>
                            <div class="bg-warning padding padding-sm small flex-horizontal">
                                <div>
                                    <i class="icon-warning"></i>
                                </div>
                                <div>
                                <span>
                                    The encryption key defined in this section will be used only if the database being backed up is <strong>Not encrypted</strong>.<br>
                                    If the database backed up is <strong>encrypted</strong> then the backup will use the database key itself.
                                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div data-bind="compose: $root.backupDestinationsView"></div>
    </div>
</form>

<script type="text/html" id="test-connection-results-template">
    <div data-bind="with: testConnectionResult">
        <div data-bind="compose: $root.backupDestinationTestCredentialsView"></div>
    </div>
</script>
